<script setup lang="js">
import { ref } from 'vue'

const link = ref('https://github.com/guocaoyi/create-chrome-ext')
</script>

<template>
  <div class="devtools-bg">
    <main class="card">
      <h1 class="title">DevTools 工具页</h1>
      <p class="subtitle">快速开发浏览器扩展插件</p>
      <a :href="link" target="_blank" class="btn-link">由 create-chrome-ext 生成</a>
    </main>
  </div>
</template>

<style>
.devtools-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%);
}

.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(60, 60, 60, 0.10), 0 1.5px 6px 0 rgba(66, 185, 131, 0.08);
  padding: 2.5rem 2.5rem 2rem 2.5rem;
  min-width: 80vw;
  min-height: 50vh;
  text-align: center;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 8px 32px 0 rgba(60, 60, 60, 0.18), 0 2px 8px 0 rgba(66, 185, 131, 0.12);
}

.title {
  color: #42b983;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

.subtitle {
  color: #888;
  font-size: 1.1rem;
  margin-bottom: 2.2rem;
  font-weight: 400;
}

.btn-link {
  display: inline-block;
  padding: 0.6em 1.6em;
  background: linear-gradient(90deg, #42b983 0%, #38bdf8 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 8px 0 rgba(66, 185, 131, 0.10);
  transition: background 0.2s, box-shadow 0.2s;
}

.btn-link:hover {
  background: linear-gradient(90deg, #38bdf8 0%, #42b983 100%);
  box-shadow: 0 4px 16px 0 rgba(66, 185, 131, 0.18);
}
</style>
